// 定义空数组放数据
let arr = []
let id = 0
let magArr = []
let index = 0

// 默认显示
show()


//输入事件 判断是否符合规范
$('[name="name"]').on('input', function() {
    //判断输入的值是否符合规范 
    const reg = /^[a-zA-Z0-9_]{8,16}$/
        // 不符合规范就变红
    if (!reg.test($(this).val())) {
        $(this).prev().removeClass('rightColor').parent().removeClass('rightBoder')
        $(this).prev().addClass('errorColor').parent().addClass('errorBoder')
    } else {
        $(this).prev().removeClass('errorColor').parent().removeClass('errorBoder')
        $(this).prev().addClass('rightColor').parent().addClass('rightBoder')
    }
})
$('[name="phone"]').on('input', function() {
    //判断输入的值是否符合规范 
    const reg = /^[0-9]{11}$/
        // 不符合规范就变红

    if (!reg.test($(this).val())) {
        $(this).prev().removeClass('rightColor').parent().removeClass('rightBoder')
        $(this).prev().addClass('errorColor').parent().addClass('errorBoder')
    } else {
        $(this).prev().removeClass('errorColor').parent().removeClass('errorBoder')
        $(this).prev().addClass('rightColor').parent().addClass('rightBoder')
    }
})
$('[name="education"]').on('input', function() {
    //  学历一直绿
    $(this).prev().addClass('rightColor').parent().addClass('rightBoder')
})
$('[name="age"]').on('input', function() {
    //判断输入的值是否符合规范 
    const reg = /^[0-9]{1,3}$/
        // 不符合规范就变红
    if (!reg.test($(this).val())) {
        $(this).prev().removeClass('rightColor').parent().removeClass('rightBoder')
        $(this).prev().addClass('errorColor').parent().addClass('errorBoder')
    } else {
        $(this).prev().removeClass('errorColor').parent().removeClass('errorBoder')
        $(this).prev().addClass('rightColor').parent().addClass('rightBoder')
    }

})
$('[name="salary"]').on('input', function() {
    //判断输入的值是否符合规范 
    const reg = /^[0-9]{1,10}$/
        // 不符合规范就变红
    if (!reg.test($(this).val())) {
        $(this).prev().removeClass('rightColor').parent().removeClass('rightBoder')
        $(this).prev().addClass('errorColor').parent().addClass('errorBoder')
    } else {
        $(this).prev().removeClass('errorColor').parent().removeClass('errorBoder')
        $(this).prev().addClass('rightColor').parent().addClass('rightBoder')
    }

})

// 点击取消按钮
$('.reset').click(function() {
    setNull()
})

// 点击保存按钮事件
$('.submit').click(() => {

    let uname = $('.add [name = "name"]').val()
    let phone = $('.add [name="phone"]').val()
    let education = $('.add [name = "education"]').val()
    let age = $('.add [name = "age"]').val()
    let salary = $('.add [name = "salary"]').val()

    // 判断是否为空
    if (!uname || !phone || !education || !age || !salary) {
        alert('所有选项都不能为空')
            // 清空内容
        setNull()
        return
    }
    // 是否符合规范，这里可以判断p>span标签的color颜色是否是绿色
    if (!$('p>span').hasClass('rightColor')) {
        alert('所有输入不规范，重新输入')
        setNull()
        return
    }

    // 判断不能和本地存储的id一样
    // let localArr = JSON.parse(localStorage.getItem('arr'))
    // console.log(localArr[0].id);
    // localArr.forEach(item => {
    //     if (!item.id === undefined || item.id === id) {
    //         alert('不能添加重复的！')
    //         return
    //     }
    // })

    // 符合且不为空就添加到localStorage
    id++
    let date = { id, uname, phone, education, age, salary }
    arr.unshift(date)
    console.log(arr);
    localStorage.arr = JSON.stringify(arr)
    console.log(JSON.parse(localStorage.getItem('arr')));
    alert('添加成功')
    show()
    location.reload()

})

// 点击删除
$('.delete').click(function() {
    if (confirm('确认要删除这条数据嘛?')) {
        // 获本地
        arr = JSON.parse(localStorage.getItem('arr'))

        $(this).parent().parent().remove()
            // 删除本地
        arr.splice($(this).parent().parent(), 1)
        localStorage.arr = JSON.stringify(arr)
        location.reload()
    } else {
        return
    }
})

// 修改
$('.update').click(function() {
        $('.change')[0].style.display = 'flex'
        index = $(this).attr('index')


    })
    // 保存修改
$('[name="update"]').click(function() {

    let uname = $('.change [name = "name"]').val()
    let phone = $('.change [name="phone"]').val()
    let education = $('.change [name = "education"]').val()
    let age = $('.change [name = "age"]').val()
    let salary = $('.change [name = "salary"]').val()

    // // 判断是否为空
    // if (!uname || !phone || !education || !age || !salary) {
    //     alert('所有选项都不能为空')
    //         // 清空内容
    //     setNull()
    //     return
    // }
    // // 是否符合规范，这里可以判断p>span标签的color颜色是否是绿色
    // if (!$('p>span').hasClass('rightColor')) {
    //     alert('所有输入不规范，重新输入')
    //     setNull()
    //     return
    // }

    arr = JSON.parse(localStorage.getItem('arr'))
    arr = arr.forEach(item => {
        if (item.id === index - 1) {
            item.uname = uname
            item.phone = phone
            item.education = education
            item.age = age
            item.salary = salary
        }
    })
    console.log(arr);
    localStorage.arr = JSON.stringify(arr)
    show()
    alert('修改成功')
    location.reload()

})

// 点击关闭
$('[name="no"]').click(function() {
    $('.change')[0].style.display = 'none'
})


//清空函数
function setNull() {
    // 清空内容
    $('[name="name"]').val('')
    $('[name="phone"]').val('')
    $('[name="education"]').val('')
    $('[name="age"]').val('')
    $('[name="salary"]').val('')
}

// 显示函数
function show() {
    // 获取本地
    let localArr = JSON.parse(localStorage.getItem('arr'))
    if (!localArr) {
        return
    }

    var str = ''
    localArr.forEach((item, i) => {
        str += ` <tr >
                    <td> ${ item.uname } </td> 
                    <td> ${ item.phone } </td> 
                    <td> ${ item.education } </td> 
                    <td> ${ item.age } </td>
                    <td>${ item.salary } </td>
                    <td>
                    <button class = 'delete' index = '${i}'> 删除 </button>
                    <button class='update' index='${i}'> 修改 </button> 
                    </td>
                    </tr>
                    `
        $('.table tbody').html(str)
    })
}